<template>
  <el-scrollbar height="100vh">
    <el-menu
        active-text-color="#409EFF"
        background-color="#304156"
        class="el-menu-vertical-demo"
        :default-active="activeMenu"
        text-color="#BFCBD9"
        :collapse="collapsed"
        style="border: none;min-height: 100vh"
    >
      <el-menu-item index="/" style="height: 60px" @click="toIndex()">
        <el-icon ><ColdDrink/></el-icon>
        <span style="padding-left:20px;width: 132px;font-size: 22px">My Blog</span>
      </el-menu-item>
      <el-menu-item index="loginUser" style="border-bottom: 1px solid;border-top: 1px solid;border-color: #ada9a9" class="disable" >
        <span>JackMacros</span>
      </el-menu-item>
      <component :is="menuItem" :menus="menus"></component>
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts" setup>

import {
  Connection,
  ColdDrink,
  ChatRound,
  Memo,
  Menu,
  Edit,
  CollectionTag,
  PriceTag,
  Setting,
  SwitchButton,
  MagicStick,
  Lock,
  Odometer,
  EditPen,
  WarnTriangleFilled,
  Histogram,
  Document
} from '@element-plus/icons-vue'
import {computed, markRaw, reactive, ref, shallowRef, watch} from "vue";
import MenuItem from "../header/MenuItem.vue";
import {useRoute} from "vue-router";

const route = useRoute();
const activeMenu = computed(()=>{
  return route.name
})
const menus = reactive([
  {
    path: '/',
    name: 'dashboard',
    meta: {
      title: '仪表盘',
      affix: true,
      icon: markRaw(Odometer),
    },
  },
  {
    path: '/editBlog',
    name: 'editBlog',
    meta: {
      title: '写文章',
      affix: true,
      icon: markRaw(Edit),
    },
  },
  {
    path: '/modules',
    name: 'modules',
    meta: {
      title: '管理模块',
      icon: markRaw(Menu),
      roles: ['admin',],
    },
    children: [
      {
        path: 'blog',
        name: 'blog',
        meta: {
          title: '博客管理',
          icon: markRaw(Memo),
        }
      },
      {
        path: 'comment',
        name: 'comment',
        meta: {
          title: '评论管理',
          icon: markRaw(ChatRound),
        }
      },
      {
        path: 'category',
        name: 'category',
        meta: {
          title: '分类管理',
          icon: markRaw(CollectionTag),
        }
      },
      {
        path: 'tag',
        name: 'tag',
        meta: {
          title: '标签管理',
          icon: markRaw(PriceTag),
        }
      },
      {
        path: 'otherLink',
        name: 'otherLink',
        meta: {
          title: '友情链接',
          icon: markRaw(Connection),
        }
      },
    ]
  },
  {
    path: '/log',
    name: 'log',
    meta: {
      title: '日志管理',
      icon: markRaw(Document),
      roles: ['admin',],
    },
    children: [
      {
        path: 'operationLog',
        name: 'operationLog',
        meta: {
          title: '操作日志',
          icon: markRaw(MagicStick),
        }
      },
      {
        path: 'visitLog',
        name: 'visitLog',
        meta: {
          title: '访问日志',
          icon: markRaw(Histogram),
        }
      },
      {
        path: 'exceptionLog',
        name: 'exceptionLog',
        meta: {
          title: '异常日志',
          icon: markRaw(WarnTriangleFilled),
        }
      },
    ]
  },
  {
    path: '/system',
    name: 'system',
    meta: {
      title: '系统管理',
      icon: markRaw(Setting),
      roles: ['admin',],
    },
    children: [
      {
        path: 'systemConfig',
        name: 'systemConfig',
        meta: {
          title: '系统配置',
          icon: markRaw(EditPen),
        }
      },
      {
        path: 'editUser',
        name: 'editUser',
        meta: {
          title: '修改用户',
          icon: markRaw(Lock),
        }
      },
      {
        path: 'editPassword',
        name: 'editPassword',
        meta: {
          title: '密码修改',
          icon: markRaw(SwitchButton),
        }
      },
    ]
  },
])

let menuItem = markRaw(MenuItem);

const toIndex = ()=>{
  location.reload();
}

defineProps({
  collapsed: {
    type: Boolean
  }
})

</script>

<style scoped lang="scss">
.disable {
  pointer-events: none;
}
</style>
